<!--
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2023-present Kaleidos INC
-->

<ng-container *transloco="let t; read: 'project_settings'">
  <form
    *ngIf="
      (isMember && !hasSingleAdmin) ||
      invitationOrMember.role?.slug !== 'admin' ||
      !isMember
    "
    [formGroup]="roleForm"
    class="select-container">
    <tg-ui-select
      [label]="t('members.role_label')"
      labelVisuallyHidden>
      <tui-select
        class="select-rol"
        tuiTextfieldSize="l"
        formControlName="roleName"
        tuiDropdownDirection="bottom"
        tuiDropdownAlign="left"
        [valueContent]="roleForm.get('roleName')?.value"
        (ngModelChange)="roleChange($event)"
        (keydown.enter)="$event.preventDefault()"
        [attr.data-test]="
          invitationOrMember.id || invitationOrMember.user?.username
        ">
        <tui-data-list *tuiDataList>
          <ng-container *ngFor="let role of roles; trackBy: trackByIndex">
            <div>
              <button
                [class.selected]="invitationOrMember.role?.slug === role.slug"
                tuiOption
                size="s"
                [value]="role.name"
                data-test="change-role-button">
                {{ role.name }}
              </button>
              <tg-ui-context-notification
                *ngIf="
                  isSelf &&
                  invitationOrMember.role?.slug === 'admin' &&
                  role.slug === 'admin'
                "
                class="permissions-warning"
                alertLevel="polite"
                status="info"
                data-test="permissions-warning">
                {{ t('members.warning_change_role') }}
              </tg-ui-context-notification>
            </div>
          </ng-container>
        </tui-data-list>
      </tui-select>
    </tg-ui-select>
  </form>
  <tui-hosted-dropdown
    *ngIf="
      hasSingleAdmin && isMember && invitationOrMember.role?.slug === 'admin'
    "
    [tuiDropdownAlign]="'right'"
    [content]="adminInformation"
    [(open)]="dropdownState">
    <button
      aria-controls="admin-dialog-info"
      [attr.aria-expanded]="dropdownState"
      class="disabled-select"
      tuiButton
      iconRight="help"
      type="button"
      (click)="(!dropdownState)"
      data-test="disabled-change-role">
      {{ roleForm.get('roleName')?.value }}
    </button>
  </tui-hosted-dropdown>
  <ng-template #adminInformation>
    <div
      tuiAutoFocus
      tabindex="-1"
      id="admin-dialog-info"
      class="admin-dialog"
      data-test="admin-dialog">
      <p class="admin-dialog-title">
        {{ t('members.admin_dialog_title') }}
      </p>
      <p class="admin-dialog-description">
        {{ t('members.admin_dialog_description') }}
      </p>
    </div>
  </ng-template>
</ng-container>
